<template>
  <div class="image-message no-select">
  
    <div style="position:relative" class="order-cell"  >
          <div class="top-status">
              <p class="time">下单时间: {{ dataBase.orderInfo.orderCreateTime }}</p>
              <p class="status red"> {{getStatusText(dataBase.orderInfo.orderStatus) }} </p>
          </div>
          <div class="goods-data" v-for="(goods,index) in dataBase.orderInfo.skuInfos" :key="index">
              <el-image  :src="goods.skuImage?goods.skuImage:''" fit="cover" style="width:70px;height:70px;"></el-image>
              <div class="order-data">
                  <p class="order-title b_row">{{ goods.skuTitle }}</p>
                  <p class="price"><span class="unit">￥</span>{{ goods.skuVipPrice }}</p>
              </div> 
          </div>
      </div>
  </div>
  <div></div>
</template>

<script>
import { reactive, toRefs, watch, onMounted, computed, ref } from "vue";

import { imgZoom } from '/@/views/chat/utils/functions.js'
import { orderModelStatus } from '/@/stores/order'
export default {
    name: 'OrderMessage',
    props: {
      dataBase: {
          type: Object,
          default: '',
        }
    },
    setup() {
      const storeOrder = orderModelStatus() // 订单各类状态数据
      const state = reactive({
        filterList: storeOrder.status,
      })
                 // 获取订单状态
                 const getStatusText = computed(() => {
            return (val) => {
                const result = state.filterList.find(item => {
                    return item.id == String(val)
                })
                return result ? result.name : ''
            }
        })
        return {
          getStatusText
        }
    }
}
</script>

<style lang="scss" scoped>
.image-message {
  box-shadow: 0 0 5px 0px #e8e4e4;
  border-radius: 10px;
  &:hover {
      box-shadow: 0 0 5px 0px #cac6c6;
  }
  .shop_box{
    width: 240px;
    height: 100px;
    background: #F3F7FA;
    border-radius: 10px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 10px;
    .shop_box_img{
      width: 80px;
      height: 80px;
      border-radius: 10px;
      overflow: hidden;
      img{
        width: 100%;
        // height: 100%;
        display: block;
      }
    }
    .shop_box_text{
      width: 127px;
      height: 100%;
      margin-left: 10px;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      .p1{
      font-size: 13px;
      font-family: PingFang;
      font-weight: bold;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      }
      .p2{
        font-size: 14px;
        font-family: DIN;
        font-weight: bold;
        color: #FF3131;
      }
    }
  }
}
.order-cell{
    width: 270px;
    padding: 10px 0;
    margin: 0 5px 5px;
    background: var(--next-color-white);
    cursor: pointer;
    transition: .5s;
    // &:hover{
    //     box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
    // }
    &:last-child{
        border: none;
    }
    .top-status{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ecebeb;
        padding: 0 8px 10px;
        .time{
            font-size: 13px;
            color: var(--el-text-color-primary);
        }
        .status{
            font-size: 13px;
            &.red{
                color: var(--el-color-error);
            }
        }
    }
    .goods-data{
        padding: 10px 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        .order-data{
            flex: 1;
            overflow: hidden;
            margin-left: 10px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            .order-title{
                font-size: 13px;
            }
            .price{
                font-size: 15px;
                color: var(--el-color-error);
                .unit{
                    font-size: 12px;
                }
            }
        }
    }
}
</style>